<template>
	<div class="commodity">
		<ul class="nav">
			<li class="nav-item" :class="{'tab-active':current===1}" @click="changeTab(1)">商品分组管理</li>
			<li class="nav-item" :class="{'tab-active':current===2}" @click="changeTab(2)">商品上下架</li>
			<!-- <li class="nav-item" @click="changeTab(3)">批量导入商品</li> -->
		</ul>
		<!-- 商品分组管理   start -->
		<div class="con-warrp" v-if="current === 1">
			<div class="left-con">
				<div class="top-bar">
					<span class="el-icon-warning edit-icon"></span>
					合理设置商品分类能方便进行及时的管理
				</div>
				<div class="group-name">
					<span class="group-item">分组名称</span>
					<span class="group-item">{{groupTitle}}</span>
					<el-popover
					  v-if="groupTitle !=='全部商品'"
					  placement="bottom"
					  title="分组名称"
					  width="200"
					  v-model="showUpdate"
					  trigger="click">
					  <el-input size="mini" v-model="updateName" placeholder="请输入分组名称" style="margin-bottom: 8px;"></el-input>
					  <el-button size="mini" type="primary" @click="updateGroup">确定</el-button>
					  <el-button size="mini" @click="showUpdate = false">取消</el-button>
					  <span slot="reference" class="group-item edit-item">编辑</span>
					</el-popover>						
					<span v-if="groupTitle !=='全部商品'" class="group-item edit-item" @click="deleteGroup">删除</span>
				</div>
<!-- 				<div class="filter">
					<span>排序方式</span>
					<el-select v-model="sortType" placeholder="请选择" size="small">
				    	<el-option
					      v-for="item in sortList"
					      :key="item.value"
					      :label="item.label" 
					      :value="item.value">
				    	</el-option>
				  	</el-select>
				  	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;					
				  	<span>设置版式</span>
				  	<span class="select" @click.stop="handlePlate">
				  		{{plat}}
				  		<div class="option-warrp" v-show="plates">
				  			<ul class="option">
					  			<li class="option-item"
					  			@mouseleave="showPlate = false" 
					  			@mouseenter="getPlatePic(index)"
					  			@click.stop="setFormat(item)"
					  			v-for="(item,index) in plateList"
					  			>{{item.title}}</li>
					  		</ul>
					  		<div class="item-pic" v-show="showPlate">
					  			<img :src="platePic" width="100%">
					  		</div>
				  		</div>

				  	</span> 
 					<el-select v-model="selectPlate" @change="setFormat" placeholder="请选择" size="small">
				    	<el-option
					      v-for="item in plate"
					      :key="item.value"
					      :label="item.label"
					      :value="item.value">
				    	</el-option>
				  	</el-select>			
				</div> -->
				<div class="operation">
					<el-select style="width:150px;" :disabled="disabled" v-model="selectArt"  placeholder="添加到该组" size="small">
				    	<el-option
					      v-for="item in group"
					      :key="item.value"
					      :label="item.label"
					      :value="item.value">
				    	</el-option>
				  	</el-select>
				  	<el-button size="small" @click="removeGroup">移出此组</el-button>
				</div>
				<div class="table">
					<el-table
					  @selection-change="handleSelect"
					  v-loading="loading"
					  :data="goodsList"				      
				      style="width: 100%">
				      <el-table-column
				      	type="selection"
				      	width="55">
				      </el-table-column>
					  <el-table-column
				        prop="title"
				        label="标题"
				        width="230">
				      </el-table-column>
				      <el-table-column
				        prop="modified"
				        label="添加时间"
				        width="180">
				      </el-table-column>				      
				      <el-table-column
				        label="价格"
				        width="100">
				        <template slot-scope="scope">
				        	<span>￥{{scope.row.price | moneyFormat}}</span>
				        </template>
				      </el-table-column>
				      <el-table-column
				        label="所属分组">
				        <template slot-scope="scope">
					     	<span>{{groupTitle}}</span>
					    </template>				        
				      </el-table-column>
				    </el-table>
				    <div style="margin-top: 20px;">
				    	<el-pagination
					  	  style="margin: auto;"
						  :page-size="pageSize"
						  layout="prev, pager, next"
						  :total="totalCount"
						  :current-page.sync="currentPage"
						  @current-change="goPage1"
						 >
				   		 </el-pagination>
				    </div>

			    </div>
			</div>
			<div class="right-con">
				<p class="group-title" @click="changeGroup(-1,'all')" :class="{'gactive':gcurrent === -1}">全部商品</p>
				<p class="group-title" 
				   :class="{'gactive':gcurrent === index}"
				   @click="changeGroup(index,item)"
				   v-for="(item,index) in groupList">
					{{item.cat_name}}
				</p>
				<div class="btn">
					<el-popover
					  placement="bottom"
					  title="分组名称"
					  width="200"
					  v-model="showAdd"
					  trigger="click">
					  <el-input size="mini" v-model="groupName" placeholder="请输入分组名" style="margin-bottom: 8px;"></el-input>
					  <el-button size="mini" type="primary" @click="createGroup">确定</el-button>
					  <el-button size="mini" @click="showAdd = false">取消</el-button>
					  <p slot="reference"><span class="el-icon-plus"></span>新建分组</p>
					</el-popover>					
				</div>
			</div>
		</div>

		<!-- 商品上下架   start -->
		<div class="on-shelf" v-if="current === 2">
			<div class="filter-con">			
				<div class="filter-item">
					<p class="title">商品价格</p>
					<div class="ipt-warrp">
						<el-input v-model="pstart" placeholder="请输入起始价格"></el-input>	       	
					</div>
					<div class="ipt-warrp space">
						 - 
					</div>
					<div class="ipt-warrp">
						<el-input v-model="pend" placeholder="请输入最终价格"></el-input>
					</div>		
				</div>					
				<div class="filter-item">
					<p class="title">商品销量</p>
					<div class="ipt-warrp">
						<el-input v-model="sstart" placeholder="请输入起始销量"></el-input>		       	
					</div>
					<div class="ipt-warrp space">
						 - 
					</div>
					<div class="ipt-warrp">
						<el-input v-model="send" placeholder="请输入最终销量"></el-input>
					</div>		
				</div>									
				<div class="filter-item">
					<p class="title"></p>
					<div class="btn" @click="handleSearch('limit')">搜索</div>
				</div>
			</div>
			<div class="shelf-con">
				<div class="tab-con">
					<span class="tab-item" :class="{'active':tcurrent === 1}" @click="chnageStatu(1)">已上架商品</span>
					<span class="tab-item" :class="{'active':tcurrent === 2}" @click="chnageStatu(2)">未上架商品</span>
				</div>
				<div class="operat-con">
					<div class="left-btn" v-show="tcurrent === 1" :class="{'l-active':selectArr.length > 0}" @click="lowerFreme">下架</div>
					<div class="left-btn" v-show="tcurrent === 2" :class="{'l-active':selectArr.length > 0}" @click="">上架</div>
					
				</div>
			</div>
			<el-table
					v-loading="loading"
					@selection-change="handleSelectionChange"
					:data="tableList"
				    style="width: 100%">
					<el-table-column
				      type="selection"
				      width="55">
				    </el-table-column>
				    <el-table-column
				      prop="title"
				      label="商品"
					>
				    </el-table-column>
				    <el-table-column
				      label="价格"
				      width="105"
				      sortable
				      :row-style="'text-align:right'">
				      <template slot-scope="scope">
				      		<span>￥{{scope.row.price | moneyFormat}}</span>
				      </template>
				    </el-table-column>			    
				    <el-table-column
				      prop="stock"
				      label="库存"
				      width="85"	
				      sortable			   
				      :row-style="'text-align:right'">
				    </el-table-column>				   
				    <el-table-column
				      prop="sale_count"
				      label="总销量"
				      width="100"
				   	  sortable
				      :row-style="'text-align:right'">
				    </el-table-column>					    
				    <el-table-column
				      prop="begin_sale"
				      label="累计上架天数"
				      width="100"
				      sortable
				      :row-style="'text-align:right'">
				    </el-table-column>
				     <el-table-column
				      label="操作"
				      width="140">
				      <template slot-scope="scope">
				      	  <el-tooltip class="item" effect="dark" content="下架" placement="top-start">				    
				      	  <el-button v-show="tcurrent ===1" type="info" @click="operation(-1,tableList[scope.$index].id,scope.$index)" icon="el-icon-download" circle></el-button>
				      	  </el-tooltip>
				      	  <el-tooltip class="item" effect="dark" content="上架" placement="top-start">
						  	<el-button v-show="tcurrent ===2" type="warning" @click="operation(1,tableList[scope.$index].id,scope.$index)" icon="el-icon-upload2" circle></el-button>
						  </el-tooltip>
						  <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
						  	<el-button type="danger" @click="operation(-3,tableList[scope.$index].id,scope.$index)" icon="el-icon-delete" circle></el-button>
						  </el-tooltip>
				      </template>
				    </el-table-column>			    
				  </el-table>
				  <div class="page" style="margin: 20px auto;">
				  	<el-pagination
				  	  style="margin: auto;"
					  :page-size="pageSize"
					  layout="prev, pager, next"
					  :total="totalPage"
					  :current-page.sync="currentPage"
					  @current-change="goPage"
					 >
				   </el-pagination>
				  </div>
		</div>
<!-- 		<div class="upload" v-show="current === 3">
			<div class="desc">
				<p>1.下载批量导入商模板文件 <span class="warning">电商商品模板.xlsx下载</span></p>
				<p>2.依照模板文件中示例仔细添加</p>
				<p>3.文件大小建议不超过20M</p>
			</div>
			<div class="upload-con">
				<div class="url-box"></div>
				<el-upload
  					class="upload-btn"
  					action="https://jsonplaceholder.typicode.com/posts/"
					>
  				<el-button size="small" type="primary">点击上传</el-button>
				</el-upload>
			</div>
			<div class="btn ok-submit">提交</div>
		</div> -->
	</div>
</template>
<script>
	import {getCookie} from '../../../../assets/js/cookie.js'
	export default{
		name : 'CommodityM',
		data(){
			return{
				loading     : true,
				currentPage : 1,
				selectArr:[],
				tableList:[],
				tcurrent : 1,
				totalPage : 0,
				sstart:'',
				send:'',
				pstart:'',
				pend:'',
				type : '',
				pageSize : 5,
				status   : 1,				
				input : '',
				current : 1, //当前展示的区块
				/*-------分组-------*/
				groupTitle : '全部商品' , //分组名称
				showUpdate : false,
				updateName : '',
				goodsList    : [],
				disabled   : true,
				selectArt  : '',
				totalCount : 0,
				gcurrent   : -1,
				groupList  : [],
				showAdd    : false,
				groupName  : '',
				sortType   : '',
				sortList   : [],
				goods_id   : 'all',
				page       : 1,
				pageSize1  : 5,
				selectGoods : []



			}
		},
		props:['data'],
		mounted(){
			this.page = 1
			this.uid     = getCookie('UID')
			this.token   = getCookie('TOKEN')
			this.shop_id = this.data.id
			this.userInfo = {
				uid     : this.uid,
				token   : this.token
			}	
			this.getTableList()
			this.getGroupList()
			this.getGoodsList()
		},
		methods:{
			changeTab(index){
				this.current = index
			},
			goPage(page){
				this.page = page
				this.getTableList()
			},
			getTableList(page,limit){
				let info = {
					uid : this.uid,
					token : this.token,
					shop_id : this.shop_id,
					status  : this.status,
					page    : this.page,
					limit   : this.pageSize,
					sstart  : this.sstart,
					send    : this.send ,
					pstart  : this.pstart,
					pend    : this.pend
				}
				if(!limit){
					delete info.sstart
					delete info.send
					delete info.pstart
					delete info.pend
				}
				this.loading = true
				this.$axiosGet('/platform/vdo/getpro.json',info,true).then( res => {
					if(res.code === 200){
						this.tableList = res.data
						this.totalPage = res.count
						this.loading   = false
					}					
				})
			},
			operation(status,id,index){
				let info = {
					uid : this.uid,
					token : this.token,
					shop_id : this.shop_id,
					goods_id  : id,
					is_show   : status,
				}
				this.$axiosGet('/platform/vdo/droppro.json',info,true).then( res => {
					if(res.code === 200){
						if(status === -1){
							this.$message({
					          message: '恭喜你，下架成功',
					          type: 'success'
					        });
					        this.getTableList()
						}						
						if(status === 1){
							this.$message({
					          message: '恭喜你，上架成功',
					          type: 'success'
					        });
					       this.getTableList()
						}						
						if(status === -3){
							this.$message({
					          message: '恭喜你，删除成功',
					          type: 'success'
					        });
					        this.getTableList()
						}
					}					
				})
			},
			//批量下架
			lowerFreme(){
				let ids = []
				this.selectArr.forEach( item => {
					ids.push(item.id)
				})
				if(!this.selectArr.length){
			        return
				}
				let newIds = ids.join(',')						
				let url = '/platform/vdo/batches.json?uid='+this.uid+'&token='+this.token+'&shop_id='+this.shop_id+'&ids='+newIds
				this.$axiosPost(url,'',true).then( res => {
					if(res.code === 200){
						this.$message({
					        message: '恭喜你，下架成功',
					        type: 'success'
					    });
					    this.getTableList()
					}
				})
			},
			chnageStatu(index){
				this.currentPage = 1			
				this.tcurrent = index
				if(index == 1){
					this.status = 1
					this.getTableList()
				}
				if(index == 2){
					this.status = -1
					this.getTableList()
				}
				
			},
			//获取批量选择的数据
			handleSelectionChange(val){
				this.selectArr = val
			},
			//条件查询
			handleSearch(){
				this.currentPage = 1
				this.page = 1
				this.getTableList()
			},
			/*        分组管理        */

			//删除分组

			//排序方式
			amendSortType(){
				this.$confirm('您确定使用该排序方式吗?', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'warning'
		        }).then(() => {
		        	//this.setSort(val)
		        	console.log('123')
		        }).catch(() => {
		        	//this.sortType = ''
		        })
			},
			// getSortArr(){
			// 	this.sortList = [{
			//           value: '选项1',
			//           label: '黄金糕'
			//         }, {
			//           value: '选项2',
			//           label: '双皮奶'
			//         }, {
			//           value: '选项3',
			//           label: '蚵仔煎'
			//         }, {
			//           value: '选项4',
			//           label: '龙须面'
			//         }, {
			//           value: '选项5',
			//           label: '北京烤鸭'
			//         }]
			// },
			//更改分组名称
			updateGroup(){
				//没输入新名字，不做处理
				if(!this.updateName){
					return
				}
				let url = `/platform/vdo/editcate.json?uid=${this.uid}&token=${this.token}&shop_id=${this.shop_id}`
				this.$axiosPost(url,{
					cat_id : this.goods_id,
					cat_name : this.updateName
				},true).then( res => {

				})
			},
			//删除分组
			deleteGroup(){
				let url = `/platform/vdo/deletecat.json?uid=${this.uid}&token=${this.token}&shop_id=${this.shop_id}`
				this.$confirm('删除分组并不会删除分组下面的商品！', '提示', {
			          confirmButtonText: '确定',
			          cancelButtonText: '取消',
			          type: 'warning'
			        }).then(() => {
			        	this.$axiosPost(url,{cat_id : this.goods_id},true).then( res => {
							if(res.code === 200){
								this.getGroupList()
								this.groupTitle = '全部商品'
								this.goods_id   = 'all'
								this.getGoodsList()
								this.gcurrent = -1
								this.$message({message:'操作成功',type:'success'})
							}
							if(res.code === 404){
								this.$message({message:'操作失败',type:'error'})
							}
						})
			        }).catch(() => {
			        	
			        })

			},

			//移出此组
			removeGroup(){
				if(!this.selectGoods.length){
					this.$message({message:'您还没有选择商品',type:'warning'})
					return
				}
				if(this.groupTitle === '全部商品'){
					this.$message({message:'该分组不支持此操作',type:'warning'})
					return
				}
				let ids = []
				this.selectGoods.forEach( item => {
					ids.push(item.id)
				})
				let url = `/platform/vdo/move.json?uid=${this.uid}&token=${this.token}`
				let info = {
					shop_id : this.shop_id,
					cat_id  : this.goods_id,
					ids     : ids
				}
				console.log(info)
				this.$confirm('您确定移出此分组吗?', '提示', {
			          confirmButtonText: '确定',
			          cancelButtonText: '取消',
			          type: 'warning'
			        }).then(() => {
						this.$axiosPost(url,info,true).then( res => {
							if(res.code === 200){
								this.getGoodsList()
								this.$message({message:'操作成功',type:'success'})
							}
							if(res.code === 404){
								this.$message({message:'操作失败',type:'error'})
							}
						})
			        }).catch(() => {
			        	
			        })
			},
			handleSelect(val){
				if(val.length){
					this.disabled = false
				}
				this.selectGoods = val
			},
			goPage1(page){
				this.page = page
				this.getGoodsList()
			},
			getGoodsList(){
				let info = Object.assign(this.userInfo,{
					cat_id  : this.goods_id,
					shop_id : this.shop_id,
					page    : this.page,
					limit   : this.pageSize1
				})
				this.$axiosGet('/platform/vdo/goodscate.json',info,true).then( res => {
					if(res.code === 200){
						this.totalCount = res.count
						this.goodsList = res.data
					}
					if(res.code === 404){
						this.goodsList = []
						this.totalCount = 0
						this.$message({message:'数据获取失败',type:'error'})
					}
				})
			},
			//将商品移动到分组
			moveToGroup(bool){
				if(!bool){
					let goodsIds = [],_this= this
					this.selectGoods.forEach( item => {
						goodsIds.push(item.id)
					})
					console.log(this.selectGoods)
					let url = `/platform/vdo/movetocate.json?uid=${this.uid}&token=${this.token}`
		        	let info = {
		        		ids : goodsIds,
		        		cat_id : this.selectArt,
		        		shop_id : this.shop_id
		        	}
					this.$confirm('您确定将商品移动到该分组吗?', '提示', {
			          confirmButtonText: '确定',
			          cancelButtonText: '取消',
			          type: 'warning'
			        }).then(() => {
			        	this.$axiosPost(url,info,true).then( res => {
			        		if(res.code === 200){
			        			this.$message({message:'操作成功',type:'success'})
			        		}
			        		if(res.code === 404){
			        			this.$message({message:'操作失败',type:'error'})
			        		}
			        	})
			        }).catch(() => {

			        })
				}
			},
			//获取分组列表
			getGroupList(){
				let info = Object.assign(this.userInfo,{
					shop_id : this.shop_id
				})
				this.$axiosGet('/platform/vdo/getcate.json',info,true).then( res => {
					if(res.code === 200){
						this.groupList = res.data
					}else{
						this.$message({message:'分组获取失败',type:'error'})
					}

				})
			},
			//切换分组，获取分组的name,id
			changeGroup(index,group){
				this.gcurrent = index
				//全部商品
				if(index < 0){
					this.groupTitle = '全部商品'
					this.goods_id   = 'all'
				}
				//其余分组
				else{
					this.groupTitle = group.cat_name
					this.goods_id   = group.id
				}
				this.updateName = this.groupTitle
				this.currentPage = 1
				this.page  = 1
				this.getGoodsList()
				
			},
			//新建分组
			createGroup(){
				if(!this.groupName){
					return
				}
				let info = {
					shop_id  : this.shop_id,
					cat_name : this.groupName
				}
				let url = `/platform/vdo/createcate.json?uid=${this.uid}&token=${this.token}`
				this.$axiosPost(url,info,true).then( res => {
					if(res.code === 200){
						this.showAdd = false
						this.getGroupList()
						this.$message({message:'新建成功',type:'success'})
					}
					if(res.code === 404){
						this.$message({message:'新建失败',type:'error'})
					}
				})
			}



		},
		computed:{
			group(){
				let options = []
				this.groupList.forEach( item => {
					if(item.cat_name){
						options.push({						
							label : item.cat_name,
							value : item.id						
						})
					}
				})
				return options		
			}
		},
		watch:{
			selectArt(){				
				this.moveToGroup()				
			}
		}
	}
</script>
<style lang="less" scoped>
	@editColor:#576b95;
	@bgColor:#f6f8f9;
	@borderColor:#d9dadc;
	@activeColor:#797979;
	@activeTab:#8da7d0;
	.commodity /deep/ .el-input__inner{
		width: 145px;
	}	
	.commodity /deep/ .is-circle{
		padding: 0;
		width: 30px;
		height: 30px;
		line-height: 30px;
	}
	.nav{
		padding: 10px 0;
		overflow: hidden;
		background: #f6f8f9;
		list-style: none;
		.nav-item{
			float: left;
			padding: 0 15px;
			font-size: 12px;
			cursor: pointer;
			border-right: 1px solid #e0e1e3;
		}
		.nav-item:last-of-type{
			border:none;
		}
		.tab-active{
			color:@activeTab;
		}
	}
	.content{
		display: flex;
		margin: 0 auto;
		margin-top: 20px;
		width: 95%;
		text-align: left;
		.content-left{
			flex:1;
			border:1px solid #e7e7eb;
			.tip-info{				
				padding-left: 15px;
				width: 100%;
				height: 40px;
				line-height: 40px;
				background: #e0eaf6;
				img{
					vertical-align: middle;
					height: 20px;
					width: 20px;
				}
				span{
					vertical-align: middle;		
				}
			}
			.name{
				margin-left: 15px;
				.name-item{
					display: inline-block;
					height: 20px;
					padding-top: 20px;
					margin-right: 8px;
				}
			}
			.sort{
				margin: 20px 0 10px 0;
				display: flex;
				height: 50px;
				line-height: 50px;
				.sort-con{
					margin-left: 15px;
					flex: 1;
					.title{
						margin-right: 10px;
					}
				}
			}
			.caozuo{
				margin-top: 20px;
				padding: 10px 15px;
				display: flex;
				background: #f4f5f9;
				.left{
					flex: 1;
					.del-btn{
						display: inline-block;
						margin-left: 10px;
						vertical-align: top;
						height: 40px;
						width: 100px;
						line-height: 40px;
						text-align: center;
						background: #e7e7eb;
						color: #aba6aa;
						border:1px solid #aba6aa;
						border-radius: 3px;
						font-size: 14px;
						cursor: pointer;
					}
				}
				.right{
					width: 200px;
					.add-btn{
						height: 40px;
						width: 160px;
						line-height: 40px;
						text-align: center;
						background: #e7e7eb;
						color: #aba6aa;
						border:1px solid #aba6aa;
						border-radius: 3px;
						font-size: 14px;
						cursor: pointer;
					}
				}
			}
		}
		.side{
			width:170px; 
			border:1px solid #e7e7eb;
			margin-left: -1px;
			.title{
				padding-left: 15px;
				height: 34px;
				line-height: 34px;
				background: #f0f0f0;
			}
			.group-item{
				padding-left: 15px;
				height: 34px;
				line-height: 34px;
				list-style: none;
			}
			.create-btn{
				padding-left: 15px;
				height: 34px;
				line-height: 34px;
			}
		}
	}

	.con-warrp{
		margin: 0 auto;
		margin-top: 20px;
		width: 95%;
		text-align: left;
		border:1px solid @borderColor;
		.left-con{
			float: left;
			width:80%;
			border-right: 1px solid @borderColor;
			.top-bar{
				padding-left: 20px;
				height: 40px;
				line-height:40px;
				background: #e0eaf6;
				.edit-icon{
					color:#00aeef;
				}
			}
			.group-name{
				margin-top: 15px;
				padding-left: 20px;
				.group-item{
					display:inline-block;
					margin-right: 20px;
					line-height:40px;
				}
				.edit-item{
					color: #8da7d0;
					cursor: pointer;
				}
			}
			.filter{
				margin-top: 10px;
				position: relative;
				padding-left: 20px;
				.select{
					vertical-align: top;
					position: relative;
					display: inline-block;
					padding: 0 10px;
					height: 32px;
					line-height: 32px;
					min-width:100px;
					border: 1px solid #eee;
					border-radius: 4px;
					cursor: pointer;
					.option-warrp{
						z-index: 999;	
						position: absolute;
						top: 31px;
						left: 0;
						background: #fff;
						.option{							
							position: relative;												
							min-width: 200px;
							padding: 10px 0;
							height: 300px;
							overflow-y: scroll;
							list-style: none;							
							box-shadow: 1px 1px 6px #ccc;
							font-size: 14px;
							.option-item{
								padding:0 10px;
								line-height: 24px;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
							.option-item:hover{
								background: #eee;
							}
						}
						.item-pic{
							z-index: 999;
							position: absolute;
							top: 0;
							left: 100%;
							min-width: 200px;
							height: 200px;
							box-shadow: 1px 1px 6px #ccc;
							background: #fff;
						}
					}
				}
			}
			.operation{
				margin-top: 10px;
				position: relative;
				padding: 10px 20px;
				background: @bgColor;
				.add-btn{
					position: absolute;
					right: 10px;
				}
			}
			.table{
				padding: 0 20px;
			}
		}
		.right-con{
			float: left;
			width: 20%;
			margin-left: -1px;
			border-left: 1px solid @borderColor;						
			.group-title{
				padding-left: 20px;
				line-height:41px;
				cursor: pointer;
				font-size: 14px;
			}
			.gactive{
				background-color: #f0f0f0;
			}
			.slide-enter-active,.slide-leave-active{
				transition: height .5s;
			}
			.slide-enter,.slide-leave-to{
				height: 0px;
			}
			.group-item{
				padding-left: 40px;
				line-height:41px;				
				cursor: pointer;
				font-size: 14px;
			}
			
			.btn{
				margin-left: 20px;
				height: 35px;
				line-height:35px;
				cursor: pointer;
			}
		}	
	}

	.on-shelf{
		width: 90%;
		margin: 0 auto;
		margin-top: 12px;
		text-align: left;
		.filter-con{
			overflow: hidden;
			.filter-item{
				float: left;
				margin-right: 15px;
				.title{
					height: 37px;
					padding:8px 0;
				}
				.ipt-warrp{
					float: left;
				}
				.space{
					height: 40px;
					line-height: 40px;
					padding:0 5px;
				}
				.btn{
					width: 100px;
					height: 40px;
					line-height: 40px;
					text-align: center;
					background: #3ca0ec;
					color: #fff;
					border-radius: 3px;
					cursor: pointer;
					font-size: 14px;
				}
			}
		}
		.shelf-con{
			margin-top: 20px;
			background: #f4f5f9;
			border:1px solid #f4f4f6;
			.tab-con{
				padding: 10px 15px;
				font-size: 0;
				border-bottom:1px solid #e7e8ec;
				.tab-item{
					display: inline-block;
					height: 30px;
					width: 90px;
					line-height: 30px;
					text-align: center;				
					font-size: 14px;
					border:1px solid #cbccd0;
					cursor: pointer;
				}
				.tab-item:nth-of-type(1){
					border-radius: 3px 0 0 3px;
				}			
				.tab-item:nth-of-type(2){
					margin-left: -1px;
					border-radius: 0 3px 3px 0;
				}
				.active{
					border-color:#3ca0ec;
					background: #3ca0ec;
					color: #fff
				}
			}
			.operat-con{
				overflow: hidden;
				padding: 10px 15px;
				border-bottom:1px solid #e7e8ec;
				.left-btn{
					float: left;
					width: 100px;
					height: 30px;
					line-height: 30px;
					text-align: center;
					background: #e7e7eb;
					color: #b6acac;
					border-radius: 3px;
					cursor: pointer;
					border:1px solid #cbccd0;
				}
				.l-active{
					background: #3ca0ec;
					color: #fff;
				}
				.right-btn{
					float: right;
					width: 120px;
					height: 30px;
					line-height: 30px;
					text-align: center;
					background: #3ca0ec;
					color: #fff;
					border-radius: 3px;
					cursor: pointer;
				}
			}
		}

	}
	.upload{
		margin-top: 40px;
		padding-left: 200px;
		text-align: left;
		.desc{
			color: #717376;
			p{
				line-height:26px;
				.warning{
					color: #3ca0ec;
				}
			}
		}
		.upload-con{
			position: relative;
			margin-top: 30px;
			.url-box{
				height: 32px;
				width:300px;
				border: 1px solid #ccc;
			}
			.upload-btn{
				position: absolute;
				left: 310px;
				top: 0;
			}
		}
		.btn{
			margin: 30px 100px;
			height: 30px;
			line-height:30px;
			width:100px;
			text-align: center;
			color: #fff;
			background:#afafaf;
			border-radius: 3px;
			cursor: pointer;
		}
		.ok-submit{
			background: #3ca0ec;
		} 
	}
	
</style>